<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header>
      <div>
        应用数学学院
      </div>
      <div>
        <span>java 教学实践平台</span>
      </div>
      <div>
        <el-button type="info" @click="logout"><span>{{username}}   </span> 退出 <i class="el-icon-switch-button"></i></el-button>
      </div>
    </el-header>

    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="foldValue?'64px':'200px'">

        <!-- 侧边栏主体区域 -->
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#007fff" unique-opened
          :collapse="foldValue" :collapse-transition="false" router :default-active="defaultActive">

          <div class="fold-button" @click="changeFoldValue">
            <i class="el-icon-caret-left"></i>
          </div>

          <!-- 第一个菜单 -->
          <el-menu-item index="sign">
            <i class="el-icon-s-grid"></i>
            <span @click="getPathActive('/sign')">在线课堂</span>
          </el-menu-item>

          <el-menu-item index="employee">
            <i class="el-icon-s-custom"></i>
            <span @click="getPathActive('/employee')">助手管理</span>
          </el-menu-item>

          <!-- 第二个菜单 -->
          <el-menu-item index="StudentManagement">
            <i class="el-icon-user-solid"></i>
            <span @click="getPathActive('/StudentManagement')">学生管理</span>
          </el-menu-item>

          <!-- 第三个菜单 -->
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-promotion"></i>
              <span>发布测试</span>
            </template>

            <!-- 发布测试1 选择 判断 填空 编程 -->
            <el-menu-item index="publishTest">
              <i class="el-icon-truck"></i>
              <span @click="getPathActive('/publishTest')">发布测试1</span>
            </el-menu-item>

            <!-- 发布测试2 代码上传 -->
            <el-menu-item index="publishTest2">
              <i class="el-icon-bicycle"></i>
              <span @click="getPathActive('/publishTest2')">发布测试2</span>
            </el-menu-item>
          </el-submenu>

          <!-- 第四个菜单 -->
          <el-menu-item index="gradesView">
            <i class="el-icon-s-platform"></i>
            <span @click="getPathActive('/gradesView')">成绩查询</span>
          </el-menu-item>

          <!-- 第五个菜单 -->
          <el-menu-item index="gradingWork">
            <i class="el-icon-edit-outline"></i>
            <span @click="getPathActive('/gradingWork')">成绩批改</span>
          </el-menu-item>


          <!-- 第五个菜单 -->
          <el-menu-item index="ppt">
            <i class="el-icon-tickets"></i>
            <span @click="getPathActive('/ppt')">课件上传</span>
          </el-menu-item>

          <!-- 第六个菜单 -->
          <el-submenu index="1">
            <template slot="title">
              <i class="
              el-icon-folder-opened"></i>
              <span>题库</span>
            </template>

            <!-- 选择题 -->
            <el-menu-item index="publicChoose">
              <i class="el-icon-sunny"></i>
              <span @click="getPathActive('/publicChoose')">选择题</span>
            </el-menu-item>

            <!-- 判断题 -->
            <el-menu-item index="publicJudge">
              <i class="el-icon-cloudy"></i>
              <span @click="getPathActive('/publicJudge')">判断题</span>
            </el-menu-item>

            <!-- 程序填空题 -->
            <el-menu-item index="publicFillEmpty">
              <i class="el-icon-partly-cloudy"></i>
              <span @click="getPathActive('/publicFillEmpty')">程序填空题</span>
            </el-menu-item>

            <!-- 编程题 -->
            <el-menu-item index="publicEncode">
              <i class="el-icon-cloudy-and-sunny"></i>
              <span @click="getPathActive('/publicEncode')">编程题</span>
            </el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>
      <!-- 主体区域 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="less" scoped>
  .el-container {
    height: 100%
  }

  .el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    color: azure;
    align-items: center;
    font-size: 20px;

    div {
      padding-left: 20px;

      span {
        margin-left: 15px;
      }
    }

  }

  .el-aside {
    background-color: #333744;

    .el-menu {
      border-right: none;
    }

    .iconfont {
      margin-right: 10px;
    }

    .fold-button {
      background-color: #4a5064;
      font-size: 18px;
      line-height: 24px;
      text-align: center;
      color: #fff;
      letter-spacing: 0.1em;
      cursor: pointer;
    }
  }

  .el-main {
    background-color: #eaedf1;
  }
</style>


<script>
  export default {
    data() {
      return {
        username:null,
        // 默认值为false
        foldValue: false,
        // main面板的路由
        defaultActive: '',
      }
    },

    created() {
      this.username = window.sessionStorage.getItem("teacher_username")
      this.defaultActive = window.sessionStorage.getItem("defaultActive")
    },

    methods: {
      // 退出功能
      logout() {
        window.sessionStorage.clear()
        this.$router.push('/login')
      },

      // 改变侧边栏开闭功能
      changeFoldValue() {
        this.foldValue = !this.foldValue
      },

      // 控制当前的main面板的路由是谁
      getPathActive(path) {
        window.sessionStorage.setItem("defaultActive", path)
        this.defaultActive = path;
      },
    },
  }
</script>